<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>景区售票系统首页</title>
<link rel="shortcut icon" href="bitbug_favicon.ico"/>
<link rel="stylesheet" type="text/css" href="/static/frontend/css/style.css" />
<link rel="stylesheet" type="text/css" href="/static/frontend/css/global.css" /> 
<script type="text/javascript" src="/static/frontend/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
    $(function(){
        // 导航
        $(".nav>ul>li").mouseenter(function(event) {
            $(this).addClass("cur").siblings().removeClass("cur")
            $(this).children(".yincang").stop().slideDown()

        });
        $(".nav>ul>li").mouseleave(function(event) {
            $(this).removeClass("cur")
            $(this).children(".yincang").stop().slideUp()
        });
        // tejia
        $(".tejia .wenzi span").mouseenter(function(event) {
           $(this).addClass("cur").siblings().removeClass("cur")
        });
        // 目的地
        $(".pinpai_inr ul li").mouseenter(function(event) {
            $(this).addClass("cur").siblings().removeClass("cur")
        });
          $(".pinpai_inr ul li").mouseleave(function(event) {
            $(".pinpai_inr ul li").removeClass("cur")
        });
         // 
         $(".tututu").mouseenter(function(event) {
             $(this).children(".heibu").stop().slideDown()
         });
         $(".tututu").mouseleave(function(event) {
             $(this).children(".heibu").stop().slideUp()
         });
        //banner
                var nowing = 0 
                var $imglis = $(".banner .list0 li")
                var $fadeCover = $(".fadeCover")
                var fadeIntime = 500
                var fadeOutime = 800
                var $circle = $(".circle li")
                var timer

                    // 定义函数
                    function rightbtn(){
                        // 先信号量的改变，
                    
                    nowing++
                    if(nowing>$imglis.length-1){
                        nowing=0
                       }
                       // 再调用函数
                    dong();
                    }
                    // 定时器业务
                     timer = setInterval(rightbtn,2000)
                    $(".banner").mouseenter(function(){
                        clearInterval(timer)
                    
                    })
                    $(".banner").mouseleave(function(){
                        clearInterval(timer)
                        timer = setInterval(rightbtn,2000)
                    })
                    // 点击小圆点业务
                    $circle.click(function(){
                        nowing = $(this).index()
                        dong()
                    })
                 function dong(){
                     // 先让fadecover淡入，让全局变白 
                  $fadeCover.fadeIn(fadeIntime,function(){
                    // ,function(){
                    // 回调函数中，就表示fadecover淡入后做的事情。
                    // 换图是干蹦的，不是淡入淡出的换,进行暗箱操作，兄弟去cur，自己加cur
                    $imglis.eq(nowing).addClass('cur').siblings().removeClass('cur')
                    // 淡出让黑布小事
                    $(this).fadeOut(fadeOutime)
                  })
                  $circle.eq(nowing).addClass("cur").siblings().removeClass("cur")
                 }

    })
</script>
</head>
<body>
<div class="header1">
    {include file="../application/frontend/view/common/top.html" /}
</div>
<div class="nav">
    {include file="../application/frontend/view/common/nav.html"}
</div>
<div class="banner">
           
            <ul class="list0">
                {foreach $banner as $val}
                
                <li class="cur"><a href="#"><img src={$val.banner_img} alt="" /></a></li>
                
               {/foreach}
              
            </ul>
            <div class="fadeCover"></div>
            <ul class="circle">
                <li class="cur">1</li>
                <li>2</li>
                <li>3</li>
             
            </ul>
</div>
<!-- 内容区域 -->
<!-- 分享 -->

<div class="cl"></div>
<div class="hot">
    <div class="new">最新点评
        <span></span>
    </div>
    <div class="main">
        <ul>
            <li class="cur">【海底夜宿】奇妙帐篷不虚此行</li>
            <li>【花车巡游】五光十色要你好看</li>
            <li>【海洋保卫战】特技与烟花齐飞</li>
            <li>【海底潜水】我与海豚有个约会</li>

        </ul>
    </div>
<script type="text/javascript" src="/static/frontend/js/hot.js"></script>
    <div class="manyidu">满意度：
        <span>100%</span>
    </div>
    <div class="comeon">即刻出发
        <span></span>
    </div>
</div>
<div class="cl"></div>
<div class="tejia">
    <p class="wenzi">
        
            <span class="cur">每日推荐</span>
            <span>景点推荐</span>
        
    </p>
    <p class="sanjiao"></p>
    <p class="more"><a href="/frontend/scenic/index">更多>></a></p>
</div>
<div class="youhuitu">
    <ul>
        <li><img src="/static/frontend/img/scenic1.jpg" alt="" />
            <div class="youhuitu-in">
            <div class="youhuitu-inl">景点</div>
            <div class="youhuitu-inr">海豚湾</div>
            <div class="xiangxi">与生俱来的上扬嘴角，一个浅浅的微笑就萌化你的心</div>
			</div>
        </li>
        <li><img src="/static/frontend/img/scenic2.jpg" alt="" />
            <div class="youhuitu-in">
				<div class="youhuitu-inl">游戏</div>
				<div class="youhuitu-inr">飞天魔轮</div>
				<div class="xiangxi">翻天覆地颠倒世界才够爽！水平、纵向双重叠加，360°的旋转不到结束绝不停止。</div>
			</div>
        </li>
        <li><img src="/static/frontend/img/scenic3.jpg" alt="" />
            <div class="youhuitu-in">
            <div class="youhuitu-inl">游戏</div>
            <div class="youhuitu-inr">超级大摆锤</div>
			<div class="xiangxi">号称"天旋地转之间，体验欢乐风暴强劲旋律，挑战心理承受极限</div>
			</div>
        </li>
        <li><img src="/static/frontend/img/scenic4.jpg" alt="" />
            <div class="youhuitu-in">
			<div class="youhuitu-inl">节目</div>
			<div class="youhuitu-inr">动物嘉年华</div>
			<div class="xiangxi">它们是欢乐的使者，它们是快乐的源泉，它们为所有朋友创作一幅奇幻画卷</div>
			</div>
        </li>
    </ul>
    
</div>
<div class="youhuitu">
    <ul>
        <li><img src="/static/frontend/img/scenic5.jpg" alt="" />
            <div class="youhuitu-in">
            <div class="youhuitu-inl">景点</div>
            <div class="youhuitu-inr">企鹅岛</div>
            <div class="xiangxi">名字高贵，行为绅士，加之生活在寒冷的南极洲，妥妥的高贵冷艳的颜值王。</div>
			</div>
        </li>
        <li><img src="/static/frontend/img/scenic6.jpg" alt="" />
            <div class="youhuitu-in">
			<div class="youhuitu-inl">景点</div>
			<div class="youhuitu-inr">海洋大街</div>
			<div class="xiangxi">巨型LED天幕，让您恍若置身海底世界</div>
			</div>
        </li>
        <li><img src="/static/frontend/img/scenic7.jpg" alt="" />
            <div class="youhuitu-in">
			<div class="youhuitu-inl">节目</div>
			<div class="youhuitu-inr">吊环</div>
			<div class="xiangxi">徐徐下降的圆环，像生活中的一个个难关，必须通过努力一次次跨域。</div>
			</div>
        </li>
        <li><img src="/static/frontend/img/scenic8.jpg" alt="" />
            <div class="youhuitu-in">
			<div class="youhuitu-inl">景点</div>
			<div class="youhuitu-inr">美洲丛林</div>
			<div class="xiangxi">穿过带着每周自由奔放的印第安大门，迎接我们的是奔放热烈的火烈鸟</div>
			</div>
        </li>
    </ul>
    
</div>
<div class="yaotiao">
        <img src="/static/frontend/img/huanying.jpg" alt="" />
</div>
<div class="pinpai">
    <p class="wenzi">
        酒店推荐    
    </p>
    <p class="more"><a href="/frontend/hotel/index">更多>></a></p>
</div>
<div class="pinpai_in">
    <div class="pinpai_inl">
        <img src="/static/frontend/img/pinpai_left.png" alt="" />
        <div class="pinpai_inlin">
        </div>
        <span class="pinpai_inl_span1">多样酒店</span>
        <span class="pinpai_inl_span2">总有一款适合你</span>
    </div>
    <div class="pinpai_inr">
        <ul>
            <li class="cur"><img src="/static/frontend/img/hotel1.jpg" alt="" />
                <span ></span>  
                <p>自然</p>     
            </li>
            <li><img src="/static/frontend/img/hotel2.jpg" alt="" />
                <span></span>
                <p>堂皇</p>
            </li>
            <li><img src="/static/frontend/img/hotel3.jpg" alt="" />
                <span></span>
                <p>现代</p>
            </li>
            <li><img src="/static/frontend/img/hotel4.jpg" alt="" />
                <span></span>
                <p>梦幻</p>
            </li>
            <li><img src="/static/frontend/img/hotel5.jpg" alt="" />
                <span></span>
                <p>温馨</p>
            </li>
            <li><img src="/static/frontend/img/hotel6.jpg" alt="" />
                <span></span>
                <p>童趣</p>
            </li>
            <li><img src="/static/frontend/img/hotel7.jpg" alt="" />
                <span></span>
                <p>科普</p>
            </li>
            <li><img src="/static/frontend/img/hotel8.jpg" alt="" />
                <span></span>
                <p>快捷</p>
            </li>
        </ul>
    </div>


</div>
<div class="pinpai">
    <p class="wenzi">
        餐厅推荐    
    </p>
    <p class="more"><a href="/frontend/restaurant/index">更多>></a></p>
</div>
<div class="chujingyou">
    <div class="chujingyou-l">
        <ul>
            <li class="li11 tututu">
                <img src="/static/frontend/img/restaurant1.jpg" alt=""  class="img11" />
                <span>意大利面</span>
                <div class="heibu1 heibu">海洋大街餐厅</div>
            </li>
            <li class="tututu">
                <img src="/static/frontend/img/restaurant2.jpg" alt="" />
                <span>三明治</span>
                <div class="heibu">海洋大街餐厅</div>
            </li>
            <li class="tututu">
                <img src="/static/frontend/img/restaurant3.jpg" alt="" />
                <span>超级汉堡</span>
                <div class="heibu">海洋大街餐厅</div>
            </li>
            <li class="li21 tututu">
                <img src="/static/frontend/img/restaurant4.jpg" alt=""  class="img21" />
                <span>澳洲牛扒</span>
                <div class="heibu2 heibu">海底餐厅</div>
            </li>
            <li class="tututu">
                <img src="/static/frontend/img/restaurant5.jpg" alt="" />
                <span>香蒜琴蚝</span>
                <div class="heibu">海底餐厅</div>
            </li>
            <li class="tututu">
                <img src="/static/frontend/img/restaurant6.jpg" alt="" />
                <span>南瓜汤</span>
                <div class="heibu">海底餐厅</div>
            </li>
        </ul>
    </div>

    <div class="chujingyou-r">
            <span></span>
            <img src="/static/frontend/img/restaurant_img.jpg" alt="" />
            <div class="show">
                <ul>
                    <li><a href="#">【海洋大街餐厅】(特价)铁板海鲜乌冬 ¥50/份</a></li>
                    <li><a href="#">【海洋大街餐厅】(特价)鲜果大虾沙律 ¥50/份</a></li>
                    <li><a href="#">【海鲜大街餐厅】(特价)青桔柠檬茶 ¥15/份</a></li>
                    <li><a href="#">【海底餐厅】(特价)香煎银鳕鱼 ¥98/份</a></li>
                    <li><a href="#">【海底餐厅】(特价)班戟伴牛奶糯米糍 ¥50/份</a></li>
                  
                </ul>
            </div>
        
    </div>
</div>
<div class="footer">
    {include file="../application/frontend/view/common/bottom.html" /}
</div>
<!-- topback -->

</body>
</html>